<template>
    <div style="width: 100%;">
        <input ref="searchInputRef" type="text" class="search-input" placeholder="请输入地铁站名称..." v-model="searchValue">
        <div ref="suggestionsContainerRef" class="suggestions"></div>
    </div>
</template>
<script lang="ts" setup>
defineOptions({
	name: 'select-subway'
});
import { ref, onMounted, onUnmounted, computed } from 'vue';
import { CrudProps } from '/#/crud';

const props = defineProps({
	...CrudProps,
	modelValue: [String, Number, Array],
	multiple: Boolean
});

// 使用 ref 引用 DOM 元素
const searchInputRef = ref<HTMLInputElement | null>(null);
const suggestionsContainerRef = ref<HTMLDivElement | null>(null);

const emit = defineEmits(['update:modelValue', 'change']);

const searchValue = computed({
	get() {
		return props.modelValue;
	},
	set(val) {
		emit('update:modelValue', val);
	}
});

// 北京地铁站数据（按线路组织）
const subwayData = {
    '1号线': ['苹果园', '古城', '八角游乐园', '八宝山', '玉泉路', '五棵松', '万寿路', '公主坟', '军事博物馆', '木樨地', '南礼士路', '复兴门', '西单', '天安门西', '天安门东', '王府井', '东单', '建国门', '永安里', '国贸', '大望路', '四惠', '四惠东'],
    '2号线': ['西直门', '车公庄', '阜成门', '复兴门', '长椿街', '宣武门', '和平门', '前门', '崇文门', '北京站', '建国门', '朝阳门', '东四十条', '东直门', '雍和宫', '安定门', '鼓楼大街', '积水潭'],
    '3号线': ['东四十条', '工人体育场', '团结湖', '朝阳公园', '石佛营', '朝阳站', '姚家园', '东坝南', '东坝', '东坝北'],
    '4号线': ['安河桥北', '北宫门', '西苑', '圆明园', '北京大学东门', '中关村', '海淀黄庄', '人民大学', '魏公村', '国家图书馆', '动物园', '西直门', '新街口', '平安里', '西四', '灵境胡同', '西单', '宣武门', '菜市口', '陶然亭', '北京南站', '马家堡', '角门西', '公益西桥'],
    '5号线': ['天通苑北', '天通苑', '天通苑南', '立水桥', '立水桥南', '北苑路北', '大屯路东', '惠新西街北口', '惠新西街南口', '和平西桥', '和平里北街', '雍和宫', '北新桥', '张自忠路', '东四', '灯市口', '东单', '崇文门', '磁器口', '天坛东门', '蒲黄榆', '刘家窑', '宋家庄'],
    '6号线': ['金安桥', '苹果园', '杨庄', '西黄村', '廖公庄', '田村', '海淀五路居', '慈寿寺', '花园桥', '白石桥南', '车公庄西', '车公庄', '平安里', '北海北', '南锣鼓巷', '东四', '朝阳门', '东大桥', '呼家楼', '金台路', '十里堡', '青年路', '褡裢坡', '黄渠', '常营', '草房', '物资学院路', '通州北关', '通运门', '北运河西', '北运河东', '郝家府', '东夏园', '潞城'],
    '7号线': ['北京西站', '湾子', '达官营', '广安门内', '菜市口', '虎坊桥', '珠市口', '桥湾', '磁器口', '广渠门内', '广渠门外', '双井', '九龙山', '大郊亭', '百子湾', '化工', '南楼梓庄', '欢乐谷景区', '垡头', '双合', '焦化厂'],
    '8号线': ['朱辛庄', '育知路', '平西府', '回龙观东大街', '霍营', '育新', '西小口', '永泰庄', '林萃桥', '森林公园南门', '奥林匹克公园', '奥体中心', '北土城', '安华桥', '安德里北街', '鼓楼大街', '什刹海', '南锣鼓巷'],
    '9号线': ['国家图书馆', '白石桥南', '白堆子', '军事博物馆', '北京西站', '六里桥东', '六里桥', '七里庄', '丰台东大街', '丰台南路', '科怡路', '丰台科技园', '郭公庄'],
    '10号线': ['巴沟', '苏州街', '海淀黄庄', '知春里', '知春路', '西土城', '牡丹园', '健德门', '北土城', '安贞门', '惠新西街南口', '芍药居', '太阳宫', '三元桥', '亮马桥', '农业展览馆', '团结湖', '呼家楼', '金台夕照', '国贸', '双井', '劲松', '潘家园', '十里河', '分钟寺', '成寿寺', '宋家庄', '石榴庄', '大红门', '角门东', '角门西', '草桥', '纪家庙', '首经贸', '丰台站', '泥洼', '西局', '六里桥', '莲花桥', '公主坟', '西钓鱼台', '慈寿寺', '车道沟', '长春桥', '火器营'],
    '11号线': ['模式口', '金安桥', '北辛安', '新首钢'],
    '12号线': ['四季青桥', '蓝靛厂', '长春桥', '苏州桥', '人民大学', '大钟寺', '蓟门桥', '北太平庄', '马甸桥', '安华桥', '安贞桥', '和平西桥', '光熙门', '西坝河', '三元桥', '将台西', '高家园', '驼房营', '东坝西', '东坝北'],
    '13号线': ['西直门', '大钟寺', '知春路', '五道口', '上地', '西二旗', '龙泽', '回龙观', '霍营', '立水桥', '北苑', '望京西', '芍药居', '光熙门', '柳芳', '东直门'],
    '14号线': ['张郭庄', '园博园', '大瓦窑', '郭庄子', '大井', '七里庄', '西局', '东管头', '丽泽商务区', '菜户营', '西铁营', '景风门', '北京南站', '陶然桥', '永定门外', '景泰', '蒲黄榆', '方庄', '十里河', '北工大西门', '平乐园', '九龙山', '大望路', '金台路', '朝阳公园', '枣营', '东风北桥', '将台', '高家园', '望京南', '阜通', '望京', '东湖渠', '来广营', '善各庄'],
    '15号线': ['清华东路西口', '六道口', '北沙滩', '奥林匹克公园', '安立路', '大屯路东', '关庄', '望京西', '望京', '望京东', '崔各庄', '马泉营', '孙河', '国展', '花梨坎', '后沙峪', '南法信', '石门', '顺义', '俸伯'],
    '16号线': ['北安河', '温阳路', '稻香湖路', '屯佃', '永丰', '永丰南', '西北旺', '马连洼', '农大南路', '西苑'],
    '17号线': ['十里河', '周家庄', '十八里店', '北神树', '次渠北', '次渠', '嘉会湖'],
    '19号线': ['牡丹园', '北太平庄', '积水潭', '平安里', '太平桥', '北京西站', '六里桥东', '六里桥', '七里庄', '丰台东大街', '丰台南路', '科怡路', '丰台科技园', '郭公庄'],
    '22号线': ['东大桥', '金台夕照', '红庙', '慈云寺桥', '甘露园', '定福庄', '管庄', '永顺', '通州北关', '运河商务区', '副中心站', '政务中心站', '政务中心东站', '燕郊镇', '神威大街', '潮白大街', '高楼', '齐心庄', '马坊', '马昌营', '平谷'],
    '28号线': ['东大桥', '金台夕照'], // 在建
    'M101线': ['副中心站'], // 在建
    '昌平线': ['昌平西山口', '十三陵景区', '昌平', '昌平东关', '北邵洼', '南邵', '沙河高教园', '沙河', '巩华城', '朱辛庄', '生命科学园', '西二旗'],
    '亦庄线': ['宋家庄', '肖村', '小红门', '旧宫', '亦庄桥', '亦庄文化园', '万源街', '荣京东街', '荣昌东街', '同济南路', '经海路', '次渠南', '次渠'],
    '房山线': ['苏庄', '良乡南关', '良乡大学城西', '良乡大学城', '良乡大学城北', '广阳城', '篱笆房', '长阳', '稻田', '大葆台', '郭公庄'],
    '机场线': ['东直门', '三元桥', '3号航站楼', '2号航站楼'],
    '大兴线': ['草桥', '新宫', '西红门', '高米店北', '高米店南', '枣园', '清源路', '黄村西大街', '黄村火车站', '义和庄', '生物医药基地', '天宫院'],
    'S1线': ['金安桥', '四道桥', '桥户营', '上岸', '栗园庄', '小园', '石厂'],
};



// 创建所有站点的扁平数组（包含线路信息）
const allStations: { name: string; line: string }[] = [];
for (const [line, stations] of Object.entries(subwayData)) {
    stations.forEach(station => {
        allStations.push({ name: station, line: line });
    });
}
// 输入框事件处理函数
const handleInput = () => {
    
    const inputValue = searchInputRef.value?.value.trim() || '';
    
    if (inputValue === '') {
        if (suggestionsContainerRef.value) {
            suggestionsContainerRef.value.style.display = 'none';
        }
        return;
    }

    // 过滤匹配的站名
    const matchedStations = allStations.filter(station => 
        station.name.includes(inputValue)
    );

    // 显示匹配结果
    if (matchedStations.length > 0 && suggestionsContainerRef.value) {
        suggestionsContainerRef.value.innerHTML = matchedStations
            .map(station => `
                <div class="suggestion-item">
                    ${station.name}
                    <span class="line-tag">${station.line}</span>
                </div>
            `)
            .join('');
        suggestionsContainerRef.value.style.display = 'block';

        // 为每个建议项添加点击事件
        const suggestionItems = suggestionsContainerRef.value.querySelectorAll('.suggestion-item');
        suggestionItems.forEach(item => {
            item.addEventListener('click', () => {
                if (searchInputRef.value) {
                    const cleanedText = item.textContent?.trim().replace(/\s+/g, ' ');
                    // 分割字符串并取第一部分
                    const firstPart = cleanedText?.split(' ')[0] || '';
                    // searchInputRef.value.value = item.textContent?.trim().split('\n')[0] || '';
                    searchInputRef.value.value = firstPart || '';
                    searchValue.value = firstPart || '';
                }
                if (suggestionsContainerRef.value) {
                    suggestionsContainerRef.value.style.display = 'none';
                }
            });
        });
    } else if (suggestionsContainerRef.value) {
        suggestionsContainerRef.value.style.display = 'none';
    }
};

// 点击页面其他地方时隐藏建议列表
const handleDocumentClick = (e: MouseEvent) => {
    if (suggestionsContainerRef.value && !e.target.closest('.search-container')) {
        suggestionsContainerRef.value.style.display = 'none';
    }
};

onMounted(() => {
    if (searchInputRef.value) {
        searchInputRef.value.addEventListener('input', handleInput);
    }
    document.addEventListener('click', handleDocumentClick);
});

onUnmounted(() => {
    if (searchInputRef.value) {
        searchInputRef.value.removeEventListener('input', handleInput);
    }
    document.removeEventListener('click', handleDocumentClick);
});
</script>
<style>
.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    padding: 20px;
    background-color: #f5f5f5;
}

h1 {
    text-align: center;
    color: #1890ff;
    margin-bottom: 30px;
}

.search-container {
    margin: 20px auto;
    max-width: 500px;
    position: relative;
}

.search-input {
    width: 100%;
    padding: 12px 20px;
    font-size: 16px;
    border: 2px solid #1890ff;
    border-radius: 8px;
    outline: none;
    transition: all 0.3s;
}

.search-input:focus {
    box-shadow: 0 0 5px rgba(24, 144, 255, 0.5);
}

.suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e8e8e8;
    border-radius: 0 0 8px 8px;
    max-height: 300px;
    overflow-y: auto;
    display: none;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.suggestion-item {
    padding: 10px 20px;
    cursor: pointer;
    transition: all 0.2s;
}

.suggestion-item:hover {
    background-color: #e6f7ff;
}

.line-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    margin-left: 8px;
    color: white;
    background-color: #1890ff;
}
</style>